<link rel="stylesheet" href="css/nav.css">
<div class="header-top">
    <div class="header-top-box" id="headerApp">
        <h1><a href="#" style="color: #0c73c2">MUSIC</a></h1>
        <ul class="header-top-ul">
            <li><a id="findMusic" href="/music_platform/pages/index.html">发现音乐</a><em></em></li>
            <li><a id="myMusic" href="/music_platform/pages/myMusic.html">我的音乐</a><em></em></li>
            <li><a id="follow" href="/music_platform/pages/follow.html">关注</a><em></em></li>
        </ul>
        <div class="search">
            <input type="text" @click="click" placeholder="音乐/视频/电台/用户" name="" v-model="searchContent">
        </div>

        <div id="area" v-show="isShow" @mouseleave="mouseout">
            <div v-if="error!==''" class="card link">{{error}}</div>
            <!-- 歌手卡片 -->
            <a :href="'/music_platform/pages/search.html?search='+searchResult.singer.sname" v-if="JSON.stringify(searchResult.singer)!=='{}'" class="card link">
                <div class="card-content">
                    <img :src="'/music_platform'+searchResult.singer.pic" alt="加载失败" class="singer-image">
                    <div class="singer-info">
                        <div class="singer-name">{{searchResult.singer.sname}}</div>
                        <div class="singer-description">{{searchResult.singer.desc}}</div>
                        <div class="fans-count">{{searchResult.singer.fansNum}} 粉丝</div>
                    </div>
                </div>
            </a>

            <!-- 单曲链接 -->
            <a v-if="searchResult.singleSongs.length > 0">
                <h2 class="section-title">单曲：</h2>
                <div class="song-links">
                    <a :href="'/music_platform/pages/search.html?search='+song.mname" v-for="song in searchResult.singleSongs" class="link">{{song.mname}}</a>
                </div>
            </a>

            <!-- 歌单链接 -->
            <a v-if="searchResult.playlists.length > 0">
                <h2 class="section-title">歌单：</h2>
                <div class="playlist-links">
                    <a :href="'/music_platform/pages/search.html?search='+playlist.plname" v-for="playlist in searchResult.playlists" class="link">{{playlist.plname}}</a>
                </div>
            </a>

            <!-- 专辑链接 -->
            <a v-if="searchResult.albums.length > 0">
                <h2 class="section-title">专辑：</h2>
                <div class="album-links">
                    <a :href="'/music_platform/pages/search.html?search='+album.aname" v-for="album in searchResult.albums" class="link">{{album.aname}}</a>
                </div>
            </a>
        </div>


        <button @click="search" class="login">搜索</button>
        <a v-if="user.username === ''" href="/music_platform/pages/login.html" class="login">登录</a>
        <a v-if="user.username !== ''" href="#" class="login" style="font-size: 13px">{{user.username}}</a>
        <a v-if="user.username !== ''" href="/music_platform/user/logout" class="login" style="font-size: 13px">退出</a>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script>
    let headerApp = new Vue({
        el:"#headerApp",
        data:{
            user:{
                uid:'',
                username:'',
            },
            isShow:false,
            searchContent:"",
            debouncedKeyword:null,//当前防抖函数
            searchResult:{
                singer:{
                },
                singleSongs:[],
                playlists:[],
                albums:[]
            },
            error:"",
        },
        methods:{
            getUser:function (){
                let _this = this;
                axios.get("/music_platform/user/session").then(function (response){
                    if (response.data.data!==null){
                        _this.user=response.data.data;
                    }
                })
            },
            search(){
                location.href = "/music_platform/pages/search.html?search="+this.searchContent;
            },
            keyword(val){
                const _this = this;
                if(val !== ""){
                    axios.get("/music_platform/user/search?search="+_this.searchContent).then(function (response) {
                        _this.searchResult = response.data;
                        if (response.data.singer ===null){
                            _this.searchResult.singer = {};
                        }
                        if (JSON.stringify(_this.searchResult.singer) ==="{}" && _this.searchResult.singleSongs.length ===0
                            && _this.searchResult.playlists.length ===0 && _this.searchResult.albums.length ===0){
                            _this.error = "抱歉，未找到匹配您搜索的内容";
                        }else {
                            _this.error = "";
                        }
                    })
                }
            },
            mouseout(){
                this.isShow = false;
            },
            click(){
                if (JSON.stringify(this.searchResult.singer) !=="{}"|| this.searchResult.singleSongs.length !==0
                    || this.searchResult.playlists.length !==0 || this.searchResult.albums.length !==0){
                    this.isShow = true;
                }
            },
        },
        created:function (){
            this.getUser();
        },
        watch:{
            searchContent: {
                handler(val) {
                    const _this = this;
                    if(val===""){
                        _this.searchResult.singer={};
                        _this.searchResult.singleSongs=[];
                        _this.searchResult.playlists=[];
                        _this.searchResult.albums=[];
                        _this.error ="";
                        _this.isShow = false;
                    }else {
                        if (_this.debouncedKeyword) {//用来检查debouncedKeyword是否存在
                            clearTimeout(_this.debouncedKeyword); // 取消上一次的延迟执行
                        }
                        _this.debouncedKeyword = setTimeout(function() {
                            _this.keyword(val);
                            _this.isShow = true;
                        }, 500);
                    }
                }
            }
        }
    })
</script>
